<template>
  <div>
    <Navigation></Navigation>
    <!-- 大图 -->
    <div class="bigimgbox">
      <img src="./img/enterprise/qiyezuche.jpg" alt="" />
    </div>
    <!-- font图标 -->
    <div class="fontboxs">
      <div class="fontbox">
        <img src="./img/enterprise/ico-zcqy1.png" alt="" />
        <div>机场接送</div>
      </div>
      <div class="fontbox">
        <img src="./img/enterprise/ico-zcqy2.png" alt="" />
        <div>企业接班</div>
      </div>
      <div class="fontbox">
        <img src="./img/enterprise/ico-zcqy3.png" alt="" />
        <div>会议用车</div>
      </div>
      <div class="fontbox">
        <img src="./img/enterprise/ico-zcqy4.png" alt="" />
        <div>商务包车</div>
      </div>
      <div class="fontbox">
        <img src="./img/enterprise/ico-zcqy5.png" alt="" />
        <div>企业长租</div>
      </div>
      <div class="fontbox">
        <img src="./img/enterprise/ico-zcqy6.png" alt="" />
        <div>定制服务</div>
      </div>
    </div>
    <!-- 我们的优势 -->
    <div class="self">
      <div class="selftitle">我们的优势</div>
      <el-steps :active="4" finish-status="success " align-center>
        <el-step
          title="专业品质服务"
          description="成都蓉之风成立于2010年，起步早、定位早、管理严谨、服务创新意识强，现已成为在公司规模、综合实力、服务水平等方面均衡发展的汽车租赁公司。"
        ></el-step>
        <el-step
          title="10年以上司机驾龄"
          description="公司所有司机普遍10年以上驾龄，并经过严格筛选培训后上岗。拥有五星级酒店服务水平。"
        ></el-step>
        <el-step
          title="24小时在线服务"
          description="24小时在线服务，遇到任何问题第一时间反馈；秉承“客户至上，信誉第一”的服务理念，尽心尽力为客户服务。"
        ></el-step>
        <el-step
          title="提供商务会议接待"
          description="公司多次提供各大摆展和明星、商务会议服务用车；车辆种类品牌齐全，所有司机着装统一。"
        ></el-step>
      </el-steps>
    </div>
    <!-- 车表 -->
    <div class="cartype">
      <div>推荐车型</div>
      <div class="cartype2">选择我们不会让你失望</div>
    </div>
    <div class="carlists">
      <div class="carlist" v-for="el in arr1">
        <router-link :to="{path:'/yj/detail',query:{'id':el.carid}}">
          <img :src="el.img[0]" alt="" />
       </router-link>
        <div class="type1">{{el.carname}}</div>
        <div class="type2">{{el.shift}}&nbsp;|&nbsp;乘坐{{el.peopel}}人</div>
        <div class="type3">￥<span>{{el.price}}</span>元起</div>
      </div>
    </div>

    <Footer1></Footer1>
  </div>
</template>

<script setup>

import {ref,
		reactive,
		onBeforeMount,
		getCurrentInstance,
 
	} from "vue"


// 后端数据

 
	let arr1=reactive([]) //和vue2一样，请求数据时需要提前用一个空数组装
 
	const {proxy} = getCurrentInstance(); //正常使用:语法糖环境默认为setup钩子
  
  	 onBeforeMount( async()=>{
  	 	let res=await proxy.$axios('/qiyecar') //使用公共配置的$axios进行axios请求
  	 	//因为公共路径的配置所以多了一个api1，实际请求的网址为http://127.0.0.1:5137/api1/test
  	 	//此时会进行代理 转变为http://127.0.0.1:7001/test
  	 	 arr1.push(...res.data) //将请求的数据添加到外部的arr1中
		 // console.log(arr1,6666)	
		 
		 //处理图片路径问题
		 let VehicleCarArry=[]
		 let aa=[]
		 let bb=[]
		arr1.forEach((el,index)=>{
				VehicleCarArry[index]=el.VehicleCar.split("---")
				aa[index]=VehicleCarArry[index].join('http://localhost:7001')
				bb[index]=aa[index].split(",")
			    el.img=bb[index]
				

		})
		// arr1.push
			// console.log(VehicleCarArry,1111,aa,222,bb)
			// console.log(arr1,6666)
  	 })
  

</script>

<style lang="scss" scoped>
//大图
.bigimgbox {
  width: 100%;
  text-align: center;
  overflow: hidden;
  img {
    margin: auto -100%;
    vertical-align: middle;
  }
}
//font图标
.fontboxs {
  width: 1000px;
  padding: 30px;
  margin: 0 auto;
  text-align: center;
  // background-color: antiquewhite;
  display: flex;
  justify-content: space-evenly;
  .fontbox {
    width: 150px;
    img {
      width: 75px;
      height: 75px;
    }
    div {
      cursor: default;
      font-size: 15px;
    }
  }
}
//我们的优势
.self {
  cursor: default;
  margin: 0 auto;
  width: 80%;
  // background-color: antiquewhite;
  text-align: center;
  padding: 20px;
  .selftitle {
    margin: 0 auto;
    // width: 50px;
    height: 50px;
    font-size: 50px;
    padding-bottom: 20px;
    color: #3ac257;
  }

  ::v-deep .el-step__title {
    font-size: 25px;
    line-height: 60px;
  }
}
//车表描述
.cartype {
  cursor: default;
  width: 1300px;
  // height: 30px;
  text-align: center;
  font-size: 40px;
  background-color: #fafafa;
  // color: #3ac257;
  margin: 0 auto;
  line-height: 45px;
  .cartype2 {
    font-size: 14px;
    color: #a5a59d;
  }
} //车表
.carlists {
  background-color: #fafafa;
  cursor: default;
  width: 1300px;
  // height: 2000px;
  margin: 0 auto;
  // background-color: #3ac257;
  flex-wrap: wrap;
  display: flex;
  // justify-content: space-between;

  .carlist:hover {
    box-shadow: 0 16px 32px 0 rgba(48, 55, 66, 0.15); /* 鼠标悬浮时盒子出现的阴影 */
    transform: translate(0, -5px); /* 鼠标悬浮时盒子上移10px */
  }
  //单个车box
  .carlist {
    width: 378px;
    // background-color: aliceblue;
    margin-bottom: 20px;
	margin-left: 40px;
    position: relative;
    border: 1px solid #d5d2d2;
    transition: all 0.3s; /* 上浮这个过程需要的时间 */
    a {
      //车img
      img {
        cursor: pointer;
        width: 378px;
        height: 258px;
      }
    } //车辆型号
    .type1 {
      margin-left: 10px;
      margin: 5px;
      font-size: 18px;
    }
    .type2 {
      margin-left: 10px;
      font-size: 14px;
    }
    .type3 {
		width:130px;
      position: absolute;
      top: 280px;
      left: 260px;
      span {
        color: #ff3e1d;
        font-size: 24px;
      }
    }
  }
}
</style>
